import React from 'react';
import defaultData from "./data";
import Props from "../base/Props";
import classNames from 'classnames';
import { Row, Popover, Button } from "antd";
import { WeaCheckbox, WeaLocaleProvider, WeaInput } from 'ecCom';
import DefaultVal from '../../../../common/default-value';
import Validate from './validate';

const { getLabel } = WeaLocaleProvider;
const { custom: { validate } } = Validate;

export default class MobileProps extends Props {

  state = {
    visible: false,
    newSign: '',
    mobileNumber: '',
    isShowError: false,
    disabled: false,
    isSend: true,
    count: 60
  };

  componentDidMount() {
    const { smsSignature } = this.props.data;
    this.setState({newSign: smsSignature})
  }

  hide = () => {
    const { smsSignature } = this.props.data;

    this.setState({
      visible: false,
      newSign: smsSignature,
      mobileNumber: '',
      isShowError: false
    });
  };

  handleVisibleChange = visible => this.setState({ visible });

  handleMobileNumber = mobileNumber => this.setState({ mobileNumber });

  handleTestMsg = () => {
    const { mobileNumber } = this.state;
    const regExp = /^1\d{10}$/;

    if(!regExp.test(mobileNumber)) return this.setState({ isShowError: true });

    this.setState({ 
      isShowError: false,
      disabled: true
    });
    
    this.countDown();
  }

  countDown = () => {
    let count = this.state.count;
    let timer = setInterval(() => {
        this.setState({count: count--,isSend: false, disabled: true},() => {
            if(0 > count){
                clearInterval(timer);
                this.setState({
                    count: 60,
                    disabled: false,
                    isSend: true
                })
            }
        })
    },1000)
  }

  handleNewSignChange = newSign => this.setState({ newSign });

  refSign = () => {
    const { newSign } = this.state;

    this.hide();
    return {
      smsSignature: newSign
    }
  }

  renderError(){
    return (
      <p className='wea-edc-errmsg'>{getLabel('511320', '请输入正确的中国大陆手机号')}</p>
    );
  }

  renderSign() {
    const { newSign, mobileNumber, isShowError, disabled, count,isSend } = this.state;
    const className = classNames('sign-item',{
      'wea-edc-has-error': isShowError
    })

    return(
      <div className='sign-popover'>
        <div className='sign-title-danger'>
          {getLabel('511317', '请谨慎填写您的公司简称、网站名、品牌名，2-8个汉字。')}
          <br/>
          {getLabel('511318', '请不要在签名中包含任何特殊字符如【】。')}
          <br />
          {getLabel('511319','如签名不符合规范，将会被运营商拦截。')}
          <br />
        </div>
        <div className='sign-item'>
          <label>{getLabel('502529', '签名')}：</label>
          <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@hhz8tf`} data-name="newSign" value={newSign} onChange={this.handleNewSignChange}/>
        </div>
        {/* <div className={className}>
          <label>测试：</label>
          <WeaInput data-name="mobileNumber" placeholder='您的手机号码' value={mobileNumber} onChange={this.handleMobileNumber} />
          <Button 
            className='verify-btn wea-edc-form-btn' 
            type="primary"
            disabled={disabled}
            onClick={this.handleTestMsg}
            >
              {isSend ? '发送测试短信' : `重新发送${count}(s)` }
            </Button>
          {isShowError && this.renderError()}
          <p className='text-muted'>更改签名后您可以发送测试短信进行验证</p>
        </div> */}
        <div className='sign-btns'>
          <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@bh10c5`} 
            className='verify-btn wea-edc-form-btn' 
            type="primary" 
            style={{marginRight: '20px'}}
            onClick={this.handlePropChange('smsSignature:(refs=refSign)')}
            >{getLabel('506963','保存')}</Button>
          <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@j76n24`} onClick={this.hide}>{getLabel('506972','取消')}</Button>
        </div>
      </div>
    )
  }

  renderDefaultValue() {
    const { data } = this.props;
    const { defaultValue } = data;

    return (
      <DefaultVal ecId={`${this && this.props && this.props.ecId || ''}_DefaultVal@n1kyc6`}
        validate={validate}
        value={defaultValue}
        placeholder={getLabel('522813', '请输入合法的手机号，或系统支持的变量字段')}
        errorTip={getLabel('522814', '请输入正确的手机号码或系统变量')} 
        onChange={super.handlePropChange('defaultValue')}
      />
    );

  }

  renderContent() {
    const { smsSignature, smsVerification, imageCode } = this.props.data;

    return(
      <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@mi9pw8`}>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ecfjcd`}>
          <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@ptwgg1`}
            content={getLabel('511321', '使用短信验证')}
            value={smsVerification}
            onChange={this.handlePropChange('smsVerification')}
          />
        </Row>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@s7qdm3`}>
          <span style={{marginLeft: '20px'}}>{getLabel('511322','使用签名')}：{smsSignature}</span>
          <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@na538z`}
            content={this.renderSign()}
            placement="left"
            trigger="click"
            visible={this.state.visible}
            onVisibleChange={this.handleVisibleChange}
          >
            <a className="ml10">{getLabel('293','更改')}</a>
          </Popover>
        </Row>
        {/* <Row>
        <WeaCheckbox
            content={'获取验证码前需填写图形验证码'}
            value={imageCode}
            onChange={this.handlePropChange('imageCode')}
          />
        </Row> */}
      </React.Fragment>
    )
  }

}

MobileProps.defaultProps = {
  data: defaultData
};